<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!--    <inputmy :type1="myinputtype1" :value1="'123'"></inputmy>-->
    <h1>这个输入框是子组件的,用来动态接收父组件的数据！传入子组件！</h1>
    <inputmy type1="text" :value1="value1" @sonMethod="fatherMethod"></inputmy>
    <button @click="change">change</button>
    <hr/>
    <h1>下面输出子组件中的数据！</h1>
    mysonValue： {{mysonValue}}
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import son1 from '@/components/son1.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    inputmy:son1
  },
  data() {
    return {
      msg:"123",
      myinputtype1:"text",
      value1:'',
      mysonValue:"默认值,子组件传过来的值，"//这个值 将会被子组件所修改！
    }
  },
  methods:{
    change(){
      this.myinputtype1="text";
    },
    //父组件的方法，data是子组件传来的值的形参
    fatherMethod(data){
      console.log(data);
      //修改父组件的data值
      this.mysonValue = data
      console.log("fatherMethod:" + this.mysonValue)
    }
  }
}
</script>
